<template>
  <div class="main-container">
    <Table
      ref="tableRef"
      :choiceColumn="true"
      :columns="columns"
      :permission="permission"
      :apiUrl="apiUrl"
      :formData="formData"
      :showPage="true"
      :emitUpStatus="true"
      :formShow="formShow"
      @update:formData="getRoleListData"
      @openFormBefore="openFormBefore"
    >
      <!-- <template #Id="{ row }">
        {{ row.id }}
        {{ setRow(row) }}
      </template> -->
      <template #avatar="{ row }">
        <el-image
          style="width: 100px; height: 100px; border-radius: 8px"
          :src="row.avatar"
          :zoom-rate="1.2"
          :z-index="9999"
          :preview-src-list="[row.avatar]"
          preview-teleported
          fit="cover"
        />
      </template>
      <template #sex="{ row }">
        <el-tag>{{ sexDom[row.sex] }}</el-tag>
      </template>
      <template #role="{ row }">
        <el-tag style="margin: 5px" v-for="(item, index) in row.role" :key="index">{{
          item.roleName
        }}</el-tag>
      </template>
      <template #status="{ row }">
        <el-switch v-model="row.status" active-value="1" inactive-value="0" disabled />
      </template>
    </Table>
  </div>
</template>

<script setup>
import Table from "@/components/Table";
import { getSysuserList, putSysuser, addSysuser, delSysuser, getSysuser } from "@/api/sysuser";
import { getRoleList } from "@/api/role";
const { proxy } = getCurrentInstance();
const tableRef = ref();
const formShow = ref("1");
const apiUrl = {
  list: getSysuserList,
  edit: putSysuser,
  add: addSysuser,
  del: delSysuser,
  get: getSysuser,
};
const permission = {
  add: "admin:user:add",
  edit: "admin:user:edit",
  del: "admin:user:del",
};
const columns = [
  {
    prop: "id",
    label: "编号",
    align: "center",
  },
  {
    prop: "avatar",
    label: "头像",
    align: "center",
  },
  {
    prop: "userName",
    label: "用户名称",
    align: "center",
  },
  {
    prop: "nickname",
    label: "昵称",
    align: "center",
  },
  {
    prop: "phoneNumber",
    label: "手机号",
    align: "center",
  },
  {
    prop: "role",
    label: "角色",
    align: "center",
  },
  {
    prop: "sex",
    label: "性别",
    align: "center",
  },
  {
    prop: "status",
    label: "状态",
    align: "center",
  },
  {
    prop: "loginIp",
    label: "最后登录IP",
    align: "center",
  },
  {
    prop: "loginAddress",
    label: "最后登录地址",
    align: "center",
  },
  {
    prop: "loginTime",
    label: "最后登录时间",
    align: "center",
  },
  {
    prop: "createTime",
    label: "创建时间",
    align: "center",
  },
];

const sexDom = {
  0: "男",
  1: "女",
  2: "未知",
};
const sexOptions = [
  { value: "0", label: "男" },
  { value: "1", label: "女" },
  { value: "2", label: "未知" },
];

const passwordRules = [
  { min: 6, max: 30, message: "密码的长度至少是6位，最多是30位", trigger: "blur" },
  {
    pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[A-Za-z\d@$!%*?&]{6,30}$/,
    message: "密码必须包含大小写字母、数字",
    trigger: "blur",
  },
];

const formData = [
  {
    type: "file",
    label: "头像",
    placeholder: "请上传用户头像",
    prop: "avatar",
    default: "",
    width: "70%",
    options: {
      cropper: { width: 400, height: 400 },
      preview: { width: 200, height: 200 },
      multiple: false,
      limit: 1,
      category: "avatar",
    },
    rules: [],
  },
  {
    type: "input",
    label: "用户名称",
    placeholder: "请输入用户名称",
    prop: "userName",
    default: "",
    width: "70%",
    searchShow: true,
    showRule: ["1"],
    rules: [
      { required: true, message: "请输入用户名称(不可修改)", trigger: "blur" },
      { min: 2, max: 20, message: "长度在 2 到 20 个字符", trigger: "blur" },
    ],
  },
  {
    type: "password",
    label: "原密码",
    placeholder: "请输入原密码",
    prop: "oPassword",
    default: "",
    width: "70%",
    showRule: ["2"],
    rules: [{ required: true, message: "请输入原密码", trigger: "blur" }],
  },
  {
    type: "password",
    label: "用户密码",
    placeholder: "如需重置密码，请输入新密码",
    prop: "password",
    default: "",
    width: "70%",
    rules: passwordRules,
  },
  {
    type: "input",
    label: "昵称",
    placeholder: "请输入用户昵称",
    prop: "nickname",
    default: "",
    width: "70%",
    searchShow: true,
    rules: [
      { required: true, message: "请输入用户昵称", trigger: "blur" },
      { min: 2, max: 20, message: "长度在 2 到 20 个字符", trigger: "blur" },
    ],
  },
  {
    type: "input",
    label: "手机号",
    placeholder: "请输入手机号",
    prop: "phoneNumber",
    default: "",
    width: "70%",
    searchShow: true,
    rules: [
      { required: true, message: "请输入手机号", trigger: "blur" },
      { pattern: /^1[3-9]\d{9}$/, message: "手机号格式不正确", trigger: "blur" },
    ],
  },
  {
    type: "select",
    label: "用户角色",
    placeholder: "请选择用户角色",
    prop: "role",
    setAttr: { multiple: true, value: "id", label: "roleName" },
    options: [],
    default: [],
    width: "70%",
    searchShow: true,
    rules: [{ required: true, message: "请选择用户角色", trigger: "blur" }],
  },
  {
    type: "radio",
    label: "请选择用户性别",
    prop: "sex",
    default: "2",
    options: sexOptions,
    width: "100%",
    searchShow: true,
    searchOption: sexOptions,
    rules: [{ required: false, message: "请选择用户性别", trigger: "blur" }],
  },
  {
    type: "switch",
    label: "状态",
    placeholder: "请选择角色状态",
    prop: "status",
    default: "1",
    options: {
      activeValue: "1",
      inactiveValue: "0",
    },
    width: "70%",
    searchShow: true,
    searchOption: [
      { value: "1", label: "启用" },
      { value: "0", label: "停用" },
    ],
    rules: [{ required: false, message: "请选择角色状态", trigger: "blur" }],
  },
  {
    type: "datetimerange",
    label: "创建时间",
    placeholder: ["筛选创建时间(开始点)", "创建时间(结束点)"],
    prop: "createTime",
    default: [],
    showRule: [],
    searchShow: true,
  },
];
const getRoleListData = () => {
  getRoleList({ status: 1 }).then((res) => {
    if (res.code === 200) {
      formData[6].options = res.data.rows;
    }
  });
};

const openFormBefore = (formOption) => {
  formShow.value ="1";
  if (formOption.hasOwnProperty("id")) {
    formShow.value ="2";
    formOption.id = formOption.id;
    formOption.role = formOption.role.map((item) => {
      return item.id;
    });
  }

};

const setRow = (row) => {
  row.id = row.Id;
};
</script>

<style scoped lang="scss"></style>
